<template>
  <div class="view-pdf">
    <div class="home-top" v-if="height >= 40">
      <div class="left">
        版本日期
        <el-select
          v-model="value"
          placeholder="版本日期"
          style="width: 120px; margin-left: 10px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="f">
        <div class="btn" @click="copyToClipboard(props.url)">复制地址</div>
        <div class="btn" @click="downFile(`${props.url}`)">下载</div>
      </div>
    </div>
    <iframe
      class="view-pdf-iframe"
      :src="pdfUrl"
      :style="{ height: `calc(100vh - ${height}px)` }"
    ></iframe>
  </div>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps(["url", "height"]);
const fileUrl = "/html/document/pdf/web/viewer.html?file=";

const height = ref(props.height || 40);

//pdf文件的链接 https://java-qa.qdama.cn/weboffice/v1/api/file/download/123.pdf
let pdfUrl = ref("");
const value = ref("2024-02-10");
const options = [{ label: "2024-02-10", value: "2024-02-10" }];

onMounted(() => {
  getPreviewFn();
});

function getPreviewFn() {
  pdfUrl.value = `${fileUrl}${props.url}`;
}

// 复制地址
function copyToClipboard(text) {
  var textarea = document.createElement("textarea");
  textarea.style.position = "fixed";
  textarea.style.opacity = 0;
  textarea.value = window.location.origin + text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);
  ElMessage({
    message: "复制成功",
    type: "success",
  });
}

// 下载地址
function downFile(url, linkDownload) {
  if (!url) {
    ElMessage({
      message: "请输入下载地址",
      type: "warning",
    });
    return;
  }
  fetch(url) //使用fetch函数发送一个GET请求到指定的URL，获取文件的响应对象。
    .then((response) => response.blob()) //通过.then方法链，将响应对象转换为Blob数据（文件的二进制数据）。
    .then((blob) => {
      //再次使用.then方法链，处理获取到的Blob数据。
      const link = document.createElement("a"); //使用document.createElement创建一个<a>节点。
      link.href = URL.createObjectURL(blob); //通过URL.createObjectURL方法，将Blob数据转换成URL对象，然后将该URL赋值给link的href属性。这一步相当于生成了一个临时URL，供下载使用。
      link.download = linkDownload || '隐私政策'; // 替换为你要保存的文件名和扩展名(设置用户下载文件时使用的文件名和扩展名)
      link.click(); //调用click方法模拟用户点击链接，从而触发浏览器的文件下载行为。

      URL.revokeObjectURL(link.href); // 释放URL对象资源(使用URL.revokeObjectURL方法释放之前创建的URL对象资源，避免内存泄漏)
    })
    .catch((error) => {
      console.error("下载失败:", error);
    });
}
// 将返回的流数据转换为url
function getObjectURL(file) {
  var binaryData = [];
  binaryData.push(file);
  let url = null;
  if (window.createObjectURL !== undefined) {
    // basic
    url = window.createObjectURL(
      new Blob(binaryData, { type: "application/pdf;chartset=utf-8" })
    );
  } else if (window.webkitURL !== undefined) {
    // webkit or chrome
    try {
      url = window.webkitURL.createObjectURL(
        new Blob(binaryData, { type: "application/pdf;chartset=utf-8" })
      );
    } catch (error) {}
  } else if (window.URL !== undefined) {
    // mozilla(firefox)
    try {
      url = window.URL.createObjectURL(
        new Blob(binaryData, { type: "application/pdf;chartset=utf-8" })
      );
    } catch (error) {}
  }
  return url;
}
</script>
<style lang="scss" scoped>
.view-pdf-iframe {
  border: none;
  width: 100%;
}
.home-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  .left {
    display: flex;
    align-items: center;
  }
  .f {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
  .btn {
    margin-left: 10px;
    line-height: 30px;
    height: 30px;
    border: 1px solid rgb(215, 0, 0);
    border-radius: 30px;
    min-width: 60px;
    padding: 0 10px;
    background: rgb(255, 241, 241);
    color: rgb(215, 0, 0);
  }
}
</style>
